<template>
  <main-wrap class="ptp1">
    <div class="weui-cells">
      <a class="weui-cell weui-cell_access fullL" href="javascript:;">
        <div class="partS">
            <p>维修项</p>
        </div>
        <router-link :to="'/mrolist'" class="weui-cell__ft black partB">{{mrotype}}</router-link>
      </a>

      <div class="weui-cell">
          <div class="weui-cell__hd"><label for="" class="weui-label">设备号</label></div>
          <div class="weui-cell__bd">
              <input class="weui-input aright" v-model="code" placeholder="请输入设备号">
          </div>
          <div class="weui-cell__ft mlp1" @click="scancode">
              <i class="iconfont icon-iconfontscanning"></i>
          </div>
      </div>
    </div>

    <div class="weui-cells__title">检修描述</div>
    <my-textarea @areatextchg="areatextchg" ref="descriarea"></my-textarea>

    <my-uploader ref="uploader"></my-uploader>

    <div class="weui-cells" v-show="false">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">预计花费</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入金额" v-model="money">
        </div>
      </div>
    </div>

    <div class="paddingP3 mtp4">
      <a href="javascript:;" class="weui-btn weui-btn_primary" :class="{'weui-btn_disabled': btnDisabled}" @click="gonext">确认</a>
    </div>
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import MyTextarea from '@/components/mytextarea'
import MyUploader from '@/components/myuploader'
import { mapState, mapMutations } from 'vuex'

import wx from 'weixin-js-sdk'
export default {
  name: 'MroReport',
  data () {
    return {
      ferror: false,
      mrotype: '',
      code: '',
      money: 0,
      descritext: '',
      btnDisabled: true
    }
  },
  components: {
    MainWrap,
    MyTextarea,
    MyUploader
  },
  computed: {
    ...mapState(['user_report_upload_items', 'order_detail'])
  },
  watch: {
    code () {
      this.checkinput()
    },
    money () {
      this.checkinput()
    },
    descritext () {
      this.checkinput()
    },
    user_report_upload_items () {
      this.checkinput()
    }
  },
  activated () {
    var pattern = /\/morderdetail\/\d+/g
    if (pattern.test(localStorage.mroreportfrom)) { // 从详情页来则不缓存页面
      this.code = ''
      this.money = 0
      this.descritext = ''
      this.$refs.descriarea.cleardata()
      this.$refs.uploader.cleardata()
      this.mrotype = '请选择维修项'
      this.empty_user_report_upload_items()

      // this.dataInit()
    } else {
      this.mrotype = localStorage.mrotype ? localStorage.mrotype : ''
    }

    this.checkinput()
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.ptp1'))
    this.wxInit()
    this.dataInit()
  },
  methods: {
    ...mapMutations(['empty_user_report_upload_items', 'add_user_report_upload_items']),
    gonext () {
      if (!this.btnDisabled) {
        this.$toast.loading({
          duration: 0,
          message: '请稍等...'
        })

        let params = {
          attachment: this.user_report_upload_items,
          repairId: localStorage.oid,
          repairItemId: localStorage.mrotypeID,
          deviceNum: this.code,
          expectedCost: this.money,
          repairDesc: this.descritext
        }
        this.cm.myajax('/sys/userrepair/writerReport', params, (data) => {
          this.$toast.clear()

          localStorage.ostat = '20'
          this.$router.push('/morderdetail/' + localStorage.oid)
        })
      }
    },
    checkinput () {
      if (this.mrotype !== '请选择维修项' && this.code !== '' && this.money !== '' && this.descritext !== '' && this.user_report_upload_items.length > 0) {
        this.btnDisabled = false
      } else {
        this.btnDisabled = true
      }
    },
    areatextchg (text) {
      this.descritext = text
    },

    wxInit () {
      this.cm.myajax('/api/weixin/oauth2/getQySignatureByJsapi', {'url': location.href}, (data) => {
        let conf = data.bean
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: conf.appId, // 必填，公众号的唯一标识
          timestamp: conf.timestamp, // 必填，生成签名的时间戳
          nonceStr: conf.noncestr, // 必填，生成签名的随机串
          signature: conf.signature, // 必填，签名
          jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
        })

        wx.ready(function () {
          console.log('wx.ready')
          wx.checkJsApi({
            jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
              // 以键值对的形式返回，可用的api值true，不可用为false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              console.log(res)
            }
          })
        })

        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log(JSON.stringify(res))
        })
      })
    },
    scancode () {
      let vm = this
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1, // 默认为0，扫描结果由政务微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          console.log(res)
          vm.code = res.resultStr
        },
        error: function (res) {
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低无法扫描')
          }
        }
      })
    },

    dataInit () {
      this.mrotype = this.order_detail.repairItemStr
      this.code = this.order_detail.deviceNum
      this.$refs.descriarea.setdata(this.order_detail.repairDesc)
      this.money = this.order_detail.expectedCost

      this.empty_user_report_upload_items()
      this.$refs.uploader.cleardata()
      for (let i = 0; i < this.order_detail.attachments.length; i++) {
        const ele = this.order_detail.attachments[i]
        if (ele.busType === '1') {
          this.add_user_report_upload_items(ele.ossId)
          let src = this.cm.getFullFileUrl(ele.filePath)
          let ftype = this.cm.getFileType2(ele.fileName)
          this.$refs.uploader.appendItem(src, ftype)
        }
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    localStorage.mroreportfrom = from.path
    next()
  }
}
</script>
